Skip to content

fix(web): fix composer mention menu highlight and scroll#1285

Open
GuilhermeVieiraDev wants to merge 4 commits intopingdotgg:mainfrom
GuilhermeVieiraDev:fix/composer-mention-scroll-into-view
Open

fix(web): fix composer mention menu highlight and scroll#1285
GuilhermeVieiraDev wants to merge 4 commits intopingdotgg:mainfrom
GuilhermeVieiraDev:fix/composer-mention-scroll-into-view

Conversation

@GuilhermeVieiraDev
Copy link
Contributor

@GuilhermeVieiraDev GuilhermeVieiraDev commented Mar 21, 2026

What Changed

Fixed the composer @ mention menu so keyboard navigation keeps the highlighted item in view.

Also restored a single visible highlight owner for the menu. The active item is now the only item that gets highlighted visually, which fixes the duplicate-highlight behavior where one item could stay visually selected while another became active from keyboard navigation.

Why

The @ mention picker had two related issues:

  • Using ArrowDown / ArrowUp could move the active item without scrolling the menu, so the real selection could end up outside the visible area.
  • The menu was also mixing Base UI highlight state with a separate app-managed active style, which could make it look like two items were selected at once.

This change keeps the visible highlight ownership in one place and adds scroll sync on the active item, which makes keyboard navigation behave like a normal command menu again.

UI Changes

Before:

  • The highlighted item could move out of view when navigating with the keyboard
  • The menu could appear to have two selected items at once
Screencast.From.2026-03-21.21-48-42.mp4

After:

  • The active item stays scrolled into view during keyboard navigation
  • The menu only shows one highlighted item at a time
Screencast.From.2026-03-21.21-50-58.mp4

Checklist

  • This PR is small and focused
  • I explained what changed and why
  • I included before/after screenshots for any UI changes
  • I included a video for animation/interaction changes

Note

Fix composer mention menu highlight tracking and scroll-into-view behavior

  • Replaces Command's built-in highlight logic in ComposerCommandMenu with parent-controlled state, passing autoHighlight={false}, keepHighlight={false}, and highlightItemOnHover={false} to prevent conflicts.
  • Adds a ref map and a useEffect that calls scrollIntoView({ block: 'nearest' }) on the active item element whenever activeItemId changes, keeping the highlighted entry visible during keyboard navigation.
  • Items now expose data-active and data-path attributes and fire onHighlightedItemChange on onMouseMove so hover and keyboard navigation stay in sync.
  • Adds a browser test in ChatView.browser.tsx that seeds project entries, simulates ArrowDown presses, and asserts scrollIntoView is called and the selected path is inserted into the draft prompt.

Macroscope summarized 9c7c97b.

@coderabbitai
Copy link

coderabbitai bot commented Mar 21, 2026

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: adb6b72c-caff-47c5-b7ce-5602e1c174c0

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • 🔍 Trigger review
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@github-actions github-actions bot added vouch:unvouched PR author is not yet trusted in the VOUCHED list. size:L 100-499 changed lines (additions + deletions). labels Mar 21, 2026
@GuilhermeVieiraDev GuilhermeVieiraDev changed the title fix(web): restore composer mention menu highlight ownership and scrol… fix(web): restore composer mention menu highlight and scroll sync Mar 21, 2026
@github-actions github-actions bot added size:M 30-99 changed lines (additions + deletions). and removed size:L 100-499 changed lines (additions + deletions). labels Mar 25, 2026
@GuilhermeVieiraDev GuilhermeVieiraDev marked this pull request as draft March 25, 2026 17:22
@GuilhermeVieiraDev GuilhermeVieiraDev changed the title fix(web): restore composer mention menu highlight and scroll sync fix(web): fix composer mention menu highlight and scroll Mar 25, 2026
@GuilhermeVieiraDev GuilhermeVieiraDev marked this pull request as ready for review March 25, 2026 21:24
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

size:M 30-99 changed lines (additions + deletions). vouch:unvouched PR author is not yet trusted in the VOUCHED list.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant